<template>
    <div class="text_contaner inclined_animation" :class="[isAnimation ?  direction :'']"
    :style="{
                animationDelay: `${delay}s`,
                animationPlayState:animationState,
                animationDuration: `${duration}s`
            }"
    @webkitAnimationStart="animationStart"
    @animationstart="animationStart"
    @webkitAnimationEnd="animationEnd"
    @animationEnd="animationEnd"
    >
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { debounce } from '../Autils/index';
import { CommonFn } from '../Ahooks/index'

defineOptions({
    name:'Inclined'
})

const props = defineProps({
    immediately: {
        type: Boolean,
        default:true
    },
    duration: {
        type: [String, Number],
        default:0.5
    },
    delay: {
        type: [String, Number],
        default:0
    },
    direction: {
        type: String,
        default:'left_top'
    }
})

const { isAnimation,
        animationState,
        start,
        paused,
        rest
        } = CommonFn()

const emits = defineEmits(["onStart",'onEnd'])

const animationStart = debounce(() => {
            emits('onStart')
        })


const animationEnd = debounce(() => {
            emits('onEnd')
        })

if (props.immediately) {
    start()
} else {
    paused()
}
defineExpose({start,paused,rest})
</script>

<style lang="less" scoped>
@import url("~/ACommonLess/index.less");

.inclined_animation{
    // animation-name: left_top;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.right_top{
    animation-name: right_top;
}

.right_bottom{
    animation-name: right_bottom;
}

.left_top{
    animation-name: left_top;
}

.left_bottom{
    animation-name: left_bottom;
}

@keyframes  right_top{
    0%{
        clip-path: polygon(100% 0, 100% 0, 100% 0,100% 0, 100% 0);
    }

    50%{
        clip-path: polygon(0 0, 0 0, 100% 0,100% 100%, 100% 100%);
    }

    100%{
        clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes  right_bottom{
    0%{
        clip-path: polygon(100% 100%, 100% 100%, 100% 100%,100% 100%, 100% 100%);
    }

    50%{
        clip-path: polygon(100% 0, 100% 0, 100% 100%,0 100%, 0 100%);
    }

    100%{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

@keyframes left_top{
    0%{
        clip-path: polygon(0 0, 0 0, 0 0,0 0, 0 0);
    }

    50%{
        clip-path: polygon(0 100%, 0 100%, 0 0,100% 0, 100% 0);
    }

    100%{
        clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 100%);
    }
}

@keyframes left_bottom{
    0%{
        clip-path: polygon(0 100%, 0 100%, 0 100%,0 100%, 0 100%);
    }

    50%{
        clip-path: polygon(0 0, 0 0, 0 100%,100% 100%, 100% 100%);
    }

    100%{
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, 100% 0);
    }
}
</style>
